<template>
  <div class="index-container">
    <header-nav/>
    <!-- banner -->
    <section class="container-banner">
      <div class="banner-center">
        <div class="banner-title">
          <span>数字可编程证券</span>
          <br>
          <span>正在重塑金融世界</span>
        </div>
        <div class="banner-countdown-title">通证开始倒计时</div>
        <div class="banner-countdown-box">
          <div class="count-item">
            <span>{{coundownTime.day.slice(0,1)}}</span>
            <span>{{coundownTime.day.slice(1,2)}}</span>
            <h1>天</h1>
          </div>
          <div class="count-item">
            <span>{{coundownTime.hour.slice(0,1)}}</span>
            <span>{{coundownTime.hour.slice(1,2)}}</span>
            <h1>时</h1>
          </div>
          <div class="count-item">
            <span>{{coundownTime.min.slice(0,1)}}</span>
            <span>{{coundownTime.min.slice(1,2)}}</span>
            <h1>分</h1>
          </div>
          <div class="count-item">
            <span>{{coundownTime.sec.slice(0,1)}}</span>
            <span>{{coundownTime.sec.slice(1,2)}}</span>
            <h1>秒</h1>
          </div>
        </div>
        <div class="banner-buttons">
          <button>立即申请</button>
        </div>
      </div>
    </section>
    <!-- 我们要做什么 -->
    <section class="do-what" id="projectDesc">
      <div class="what-table">
        <div class="table-left">
          <div class="title">
            <img src="../assets/img/Whoarewe.png" alt="我们要做什么">
            <span>我们要做什么？</span>
          </div>
          <div class="content">
            <p>BestMenger正在建立一个符合监管要求的区块链数字化证券服务平台，专为数字资产的未来而构建。</p>
            <p>我们的目标是为发行人，投资者以及二级市场搭建合规的市场基础设施。</p>
          </div>
        </div>
        <div class="table-right">
          <video id="videoElement"></video>
          <div class="play-button" @click="begin" v-show="isShowPlayButton"></div>
        </div>
      </div>
      <div class="spell-info">
        <div class="info-item" v-for="$item in weareData" :key="$item.title">
          <img :src="$item.img" alt="bestMenger">
          <div class="label">{{$item.title}}</div>
          <div class="info-content" v-html="$item.text"></div>
        </div>
      </div>
    </section>
    <!-- 数字证券通证化-->
    <section class="index-number-card" id="pass">
      <div class="title">
        <img src="../assets/img/WHY.png" alt="数字证券">
        <span>为何使用数字证券进行通证化？</span>
      </div>
      <div class="title-info">
        数字证券是一种新型的证券形式，利用区块链技术对传统证券结构升级，促进非流动性资产的流动性释放以及减少
        <br>募集资金繁琐与昂贵的流程，并且通过数字证券的可编程性让发行人与投资者权利互动更为紧密。
      </div>
      <div class="card-center-box">
        <div class="card-item" v-for="$item in numCardData" :key="$item.title">
          <img :src="$item.img" alt="数字证券">
          <div class="label">{{$item.title}}</div>
          <div class="info-content" v-html="$item.text"></div>
        </div>
      </div>
    </section>

    <!-- token说明 -->
    <section class="token-info">
      <div class="token-center-box">
        <img class="token-bg" src="../assets/img/tokenBg.png" alt="token">
        <div class="token-information">
          <div class="title">
            <img src="../assets/img/token.png" alt="token">
            <span>BestMenger Token 说明</span>
          </div>
          <div class="token-content">
            <p>BestMenger，Inc。根据美国1933年“证券法”D条例506（C）规则与S条例903规则，向认可投资者提供购买BestMenger Token的机会，该代币是BestMenger，Inc。实体股份的认股权证，将基于以太坊ERC-20发行。</p>
            <p>BestMenger Token功能具有以下内容：</p>
            <ul>
              <li>合规通证化的结构，使BestMenger Token持有者有权拥有公司股票/证券；</li>
              <li>持有者按持有比例拥有公司季度利润的分红权；</li>
              <li>受监管的可交易数字证券。</li>
            </ul>
            <p>
              BestMenger，Inc。将提供10%股份用于代币发行，目标金额最低1600万美元最高3200万美元。 有关完整的通证发行结构说明，请参阅
              <a
                href="javascript:;"
              >私募备忘录</a>
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- 通证分发 -->
    <section class="card-svg-info">
      <div class="svg-box">
        <div class="svg-item">
          <div class="svg-circle" id="circleOne"></div>
          <div class="svg-info">
            <div class="title">通证分发</div>
            <div class="line">按照购买的方式发行</div>
            <ul>
              <li v-for="$item in circleOne" :key="$item.text" :class="{active: $item.isActive}">
                <em>
                  <span class="circle" :style="{background: $item.color}"></span>
                  {{$item.value}}%
                </em>
                <span>{{$item.text}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="svg-item">
          <div class="svg-circle" id="circleTwo"></div>
          <div class="svg-info">
            <div class="title">所得款项用途</div>
            <div class="line">通证用途</div>
            <ul>
              <li v-for="$item in circleTwo" :key="$item.text" :class="{active: $item.isActive}">
                <em>
                  <span class="circle" :style="{background: $item.color}"></span>
                  {{$item.value}}%
                </em>
                <span>{{$item.text}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-info">
        <div class="card-item" v-for="$item in cardData" :key="$item.title">
          <div class="center-content">
            <span>{{$item.title}}</span>
            <span>{{$item.text}}</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 路线图 -->
    <section class="road-map" id="routeMap">
      <img src="../assets/img/implementation.png" alt="development">
      <h1>路线图</h1>
      <div class="year">2019</div>
      <div class="tree-line">
        <div class="tree-node" v-for="$item in roadMapData" :key="$item.info">
          <div class="node-content">
            <div class="node-title">
              {{$item.year}}
              <span>{{$item.time}}</span>
            </div>
            <div class="node-info">{{$item.info}}</div>
          </div>
        </div>
      </div>
      <div class="footer">后续</div>
      <div class="footer-text">
        <p>进一步完善以及合规化布局全球数字证券市场</p>
        <p>
          <em>*</em>日期可能会有变化
        </p>
      </div>
    </section>
    <!-- 常见问题 -->
    <question/>
    <!-- 联系我们 -->
    <contact-us/>
    <!-- 底部栏 -->
    <footer class="footer-content">
      <div class="center-box">
        <div class="footer-title">关注我们:</div>
        <div class="footer-info">
          <div class="icons">
            <a href="javascript:;">
              <img src="../assets/img/twitter.png">
            </a>
            <a href="javascript:;">
              <img src="../assets/img/facebook.png">
            </a>
            <a href="javascript:;">
              <img src="../assets/img/fly.png">
            </a>
            <a href="javascript:;">
              <img src="../assets/img/mess.png">
            </a>
          </div>
          <div class="copy">&#169 2019 Cryptoland</div>
        </div>
      </div>
    </footer>

    <login @close="isShowLoginDialog = false" v-show="isShowLoginDialog" />
  </div>
</template>

<script>
import HeaderNav from "../components/Header";
import Question from "../components/index/question";
import ContactUs from "../components/index/contact";
import Login from "../components/login"
import media from "../assets/bestMenger.mp4";
import screenshots from "../assets/img/screenshots.png";

export default {
  components: {
    HeaderNav,
    Question,
    ContactUs,
    Login
  },
  data() {
    return {
      isShowPlayButton: true,
      isShowLoginDialog: false,
      coundownTime: {
        day: "00",
        hour: "00",
        min: "00",
        sec: "00"
      },
      weareData: [
        {
          img: require("../assets/img/public.png"),
          title: "发行",
          text:
            "BestMenger BM18协议提供一系列<br/>解决方案，可以在全球范围内以合规<br/>和安全的方式发行和管理数字资产的<br/>整个生命周期，我们支持条例D，<br/>条例S和条例A+的发行。"
        },
        {
          img: require("../assets/img/getmoney.png"),
          title: "募资",
          text:
            "BestMenger为发行人提供受监管的<br/>端对端解决方案，安全透明地<br/>进行通证化资产的募资。发行人可以<br/>通过我们的机构和认可投资者获得<br/>潜在的流动性。"
        },
        {
          img: require("../assets/img/market.png"),
          title: "二级市场",
          text:
            "我们的交易系统专为通证化证券而<br/>设计，将加密安全的分布式账本技术<br/>与现有市场流程集成在一起，<br/>以减少结算时间和成本，<br/>提高透明度，效率和可审计性。"
        }
      ],
      numCardData: [
        {
          img: require("../assets/img/fair.png"),
          title: "合规",
          text: "内置全球监管合规性<br/>BM18代码协议"
        },
        {
          img: require("../assets/img/code.png"),
          title: "可编程",
          text: "自动执行投资者和发行人权利<br/>（股息，回购，投票等）"
        },
        {
          img: require("../assets/img/flow.png"),
          title: "流动性",
          text: "全天24小时的全球市场"
        },
        {
          img: require("../assets/img/opacity.png"),
          title: "透明且不可变",
          text: "为投资者提供直接和<br/>更确定的所有权"
        },
        {
          img: require("../assets/img/quick.png"),
          title: "高效",
          text: "减少繁琐的流程"
        },
        {
          img: require("../assets/img/lock.png"),
          title: "加密数字货币",
          text: "加密数字货币市场产生了<br/>大量新投资者"
        }
      ],
      circleOne: [
        {
          value: 80,
          color: "#363FD8",
          text: "筹集资金",
          isActive: false
        },
        {
          value: 15,
          color: "#FF7875",
          text: "团队（冻结一年）",
          isActive: false
        },
        {
          value: 2,
          color: "#FAAD14",
          text: "顾问",
          isActive: false
        },
        {
          value: 2,
          color: "#36CFC9",
          text: "推广",
          isActive: false
        },
        {
          value: 1,
          color: "#D6E4FF",
          text: "空投",
          isActive: false
        }
      ],
      circleTwo: [
        {
          value: 40,
          color: "#363FD8",
          text: "产品和研发",
          isActive: false
        },
        {
          value: 30,
          color: "#FF7875",
          text: "运营",
          isActive: false
        },
        {
          value: 25,
          color: "#36CFC9",
          text: "战略投资与合作",
          isActive: false
        },
        {
          value: 5,
          color: "#D6E4FF",
          text: "法务",
          isActive: false
        }
      ],
      cardData: [
        {
          title: "代号",
          text: "BMT"
        },
        {
          title: "发行类型",
          text: "Reg.D/S"
        },
        {
          title: "硬顶",
          text: "32,000,000美元"
        },
        {
          title: "总量",
          text: "100,000,000"
        },
        {
          title: "标准",
          text: "ERC20"
        },
        {
          title: "通证类型",
          text: "证券型通证"
        },
        {
          title: "日期限制",
          text: "1年/40天"
        },
        {
          title: "可供出售",
          text: "80,000,000"
        },
        {
          title: "接受",
          text: "BTC,ETH,USD"
        },
        {
          title: "价格",
          text: "0.4美元"
        },
        {
          title: "开始",
          text: "2019/06/01 11:00 UTC"
        },
        {
          title: "结束",
          text: "2019/11/30 11:00 UTC"
        }
      ],
      roadMapData: [
        {
          year: "2019",
          time: "/ 6月 - / 11月30日",
          info: "通证销售"
        },
        {
          year: "2019",
          time: "/ 第四季度",
          info:
            "整合第三方服务商与完成自主开发协议标准（BM18）推出符合监管要求的证券 型通证发行业务"
        },
        {
          year: "2020",
          time: "/ 第一季度",
          info:
            "进行战略收购或合作取得sec注册自营经纪商许可开展通证化资产的募资服务"
        },
        {
          year: "2020",
          time: "/ 第二季度",
          info:
            "进行战略收购或合作取得sec注册ATS系统交易许可开展通证化资产的二级市场交易服务"
        }
      ]
    };
  },

  methods: {
    begin() {
      this.flvPlayer.play();
      this.isShowPlayButton = false;
    },
    initVideo() {
      if (this.flv.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        this.flvPlayer = this.flv.createPlayer({
          type: "mp4",
          url: media
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        videoElement.poster = screenshots;
        videoElement.onended = () => {
          this.isShowPlayButton = true;
        };
      }
    },
    initEchartOne() {
      const echart = this.echart.init(document.getElementById("circleOne"));
      echart.setOption({
        color: ["#363FD8", "#FF7875", "#FAAD14", "#36CFC9", "#D6E4FF"],
        series: {
          type: "pie",
          hoverOffset: 2,
          labelLine: {
            normal: {
              show: false
            }
          },
          radius: ["60%", "98%"],
          data: [81, 15, 4, 4, 2]
        }
      });
      echart.on("mouseover", params => {
        this.circleOne.map(item =>
          item.color === params.color
            ? (item.isActive = true)
            : (item.isActive = false)
        );
      });
      echart.on("mouseout", params => {
        this.circleOne.map(item => (item.isActive = false));
      });
    },
    initEchartTwo() {
      const echart = this.echart.init(document.getElementById("circleTwo"));
      echart.setOption({
        color: ["#363FD8", "#FF7875", "#36CFC9", "#D6E4FF"],
        series: {
          type: "pie",
          hoverOffset: 2,
          labelLine: {
            normal: {
              show: false
            }
          },
          radius: ["60%", "98%"],
          data: [40, 30, 25, 5]
        }
      });
      echart.on("mouseover", params => {
        this.circleTwo.map(item =>
          item.color === params.color
            ? (item.isActive = true)
            : (item.isActive = false)
        );
      });
      echart.on("mouseout", params => {
        this.circleTwo.map(item => (item.isActive = false));
      });
    },
    // 位数不足添加0
    prefixZero(targetNum, scale = 2) {
      return (Array(scale).join(0) + targetNum).slice(-scale);
    },
    setCountTime() {
      let difference =
        (new Date("2019/6/1").getTime() - new Date().getTime()) / 1000;
      const day = Math.floor(difference / (24 * 60 * 60));
      difference = difference % (24 * 60 * 60);
      const hour = Math.floor(difference / (60 * 60))
      difference = difference % (60 * 60);
      const min = Math.floor(difference / 60);
      const sec = Math.floor(difference % 60);

      this.coundownTime = { day: this.prefixZero(day), hour:this.prefixZero(hour), min:this.prefixZero(min), sec:this.prefixZero(sec) };
    }
  },
  mounted() {
    this.initVideo();
    this.initEchartOne();
    this.initEchartTwo();
    this.autoCount = setInterval(this.setCountTime, 1000)
  },
  destroyed(){
    clearInterval(this.autoCount)
  }
};
</script>
<style lang="scss">
@import "../assets/style/pages/index.scss";
</style>

